<template>
  <div class="login-page">
    <section class="login-container">
      <h3 class="login-title">叩丁狼电商管理系统</h3>
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" placeholder="账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="密码" />
        </el-form-item>
        <el-form-item>
          <el-button class="login-submit-btn" type="primary" @click="submit()">登录</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
import { loginApi } from "@/request/httpApi";
import { SETUSERINFO } from "@/store/mutations-type";

export default {
  data() {
    //
    return {
      loginForm: {
        account: "", // 账号
        password: "" // 密码
      },

      loginRules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur"
          },
          {
            min: 3,
            max: 20,
            message: "账号长度范围是3-20个字符",
            trigger: "blur"
          }
        ],
        password: {
          required: true,
          message: "密码不能为空",
          trigger: "blur"
        }
      }
    };
  },
  methods: {
    // 登陆操作
    submit() {
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          loginApi({
            username: this.loginForm.account,
            password: this.loginForm.password
          }).then(res => {
            if (res.errno === 0) {
              this.$store.commit(SETUSERINFO, res.data);
              localStorage.setItem("token", res.data.token);
              this.$router.replace('/',() => {})
              this.loginForm.account = "";
              this.loginForm.password = "";
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped type="text/less">
.login-page {
  width: 100%;
  height: 100%;
  background-color: #324057;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-container {
    width: 330px;
    height: 210px;

    .login-title {
      padding: 10px 0;
      color: #fff;
      font-size: 24px;
      text-align: center;
    }

    .login-submit-btn {
      width: 100%;
    }
  }
}
</style>